<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="报告年份" prop="reportDate" label-width="100px">
                <el-date-picker
                    v-model="searchForm.reportDate"
                    type="year"
        			value-format="yyyy"
                    placeholder="选择年份">
                </el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-cascader
				:options="provinceAndCityData"
				v-model="searchForm.provinceOptions">
				</el-cascader>
			</el-form-item>
			<el-form-item>
				<el-select v-model="searchForm.verifyStatus" placeholder="审核状态" clearable>
					<el-option label="未更新" value="WAIT"></el-option>
					<el-option label="已更新" value="PASS"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getList">搜索</el-button>
			</el-form-item>

			<el-form-item>
				<el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
					<el-button type="danger" slot="reference" :disabled="delBtlStatu" v-if="hasAuth('yellow:home:remove')"
						>批量删除</el-button
					>
				</el-popconfirm>
			</el-form-item>
		</el-form>

		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column align="center" fixed="left" type="selection" width="55"> </el-table-column>
			<el-table-column prop="report_date" align="center" width="100" label="报告时间"></el-table-column>
			<el-table-column prop="name" align="center" label="名称"> </el-table-column>
			<el-table-column prop="number" align="center" label="数量"> </el-table-column>
			<el-table-column prop="province_name" align="center" label="省"> </el-table-column>
			<el-table-column prop="city_order" align="left" label="城市排名">
				<template slot-scope="scope">
				<p v-for="item in scope.row.city_order">
				<strong>{{ item.cityName }}</strong>：
				排名{{ item.cityOrder }}
				数量{{ item.amount }}
				</p>
				</template>

			</el-table-column>
			<el-table-column align="left" prop="emphasis_company" label="企业">
				<template slot-scope="scope">
				<p v-for="item in scope.row.emphasis_company">
				<strong>{{ item.key }}</strong>：{{ item.value }}
				</p>
				</template>
			</el-table-column>
			<el-table-column align="left" prop="indicator" label="指标">
				<template slot-scope="scope">
				<p v-for="item in scope.row.indicator">
				<strong>{{ item.key }}</strong>：{{ item.value }}
				</p>
				</template>
			</el-table-column>
			<el-table-column v-if="type === '1'" prop="description" align="left" label="描述"></el-table-column>
			<el-table-column v-else prop="description" align="left" label="描述">
				<template slot-scope="scope">
				<p v-for="item in scope.row.description">
				<strong>{{ item.key }}</strong>：{{ item.value }}
				</p>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="remark" label="备注"></el-table-column>
			<el-table-column prop="verify_status" align="center" width="100" label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.verify_status === 'PASS'" type="success"><i class="el-icon-success"></i> 已更新</el-tag>
					<el-tag v-else type="info">未更新</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="icon" align="center" width="180px" label="操作">
				<template slot-scope="scope">

					<el-button
						type="primary"
						plain
						@click="addUpdateButton(scope.row.id)"
						v-if="hasAuth('yellow:home:edit')"
						>编辑</el-button
					>

					<template v-if="hasAuth('yellow:home:remove')">
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
							<el-button type="danger" plain slot="reference">删除</el-button>
						</el-popconfirm>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
		<AddUpdate ref="addUpdate" v-if="addUpdateVisible" @refreshDataList="getList" :type="type"></AddUpdate>
	</div>
</template>

<script>
import { provinceAndCityData, codeToText } from 'element-china-area-data';
import {formatServerDate} from '@/utils/date';
import AddUpdate from './AddUpdate.vue';
import ReportDatePicker from '@/components/reportDatePicker/Index.vue';
import TypeIdSelect from '@/components/typeIdSelect/Index.vue';
import NameIdSelect from '@/components/nameIdSelect/Index.vue';
import { typeNameMixin } from '@/mixins/typeName';
import { isString } from '@/utils/validate';
export default {
	name: 'CapacityList',
	components: {
		AddUpdate,
		TypeIdSelect,
		NameIdSelect,
		ReportDatePicker,
	},
	props: {
		type: {
			type: String,
			default: '1',
		},
		isYellow: {
			type: Boolean,
			default: true,
		}
	},
	data() {
		return {
			searchForm: {
				provinceOptions: [],
            },
			delBtlStatu: true,
			tableData: [],
			total: 0,
			size: 10,
			current: 1,
			addUpdateVisible: false,
			provinceAndCityData: provinceAndCityData.map((item) => {
				const {children, ...rest} = item;
				return {
					...rest
				}
			}),
		};
	},
 	mixins: [typeNameMixin],
	created() {
		this.getList();
	},
	methods: {
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			console.log('勾选');
			console.log(val);
			this.multipleSelection = val;

			this.delBtlStatu = val.length == 0;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getList();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.current = val;
			this.getList();
		},
		getList() {
            const formData = this.searchForm;

			const {provinceOptions, ...rest} = formData;
			const district_code = (provinceOptions.length !== 0 && provinceOptions[0]) ? `${provinceOptions[0]}0000` : '';

			const params = {
						current: this.current,
						size: this.size,
                        ...rest,
			}

			if(district_code){
				params.district_code = district_code;
			}

			const url = {
				'1': '/admin/boat/yellow/countryList',
				'2': '/admin/boat/yellow/countryProvinceList',
				'3': '/admin/boat/yellow/provinceList'
			};

			this.$axios
				.get(url[this.type], {
					params,
				})
				.then((res) => {
                    const result = res.result;
					this.size = result.size;
					this.current = result.current;
					this.total = result.total;

					return result.records.map((item) => {
                        const {indicator, city_order,description,emphasis_company, district_code, ...rest} = item;

						let province_name = '';
						if(district_code){
							province_name = codeToText[parseInt(district_code.substring(0, 2), 10)] || '';
						}
						let json_indicator = indicator ? JSON.parse(indicator) : '';
						// 再转一下
						if(isString(json_indicator)){
							json_indicator = json_indicator ? JSON.parse(json_indicator) : [];
						}
                        return {
							province_name,
							indicator: json_indicator,
							city_order: city_order ? JSON.parse(city_order) : [],
							description: this.type === '1' ? description : (description ? JSON.parse(description) : []),
							emphasis_company: emphasis_company ? JSON.parse(emphasis_company) : [],
                            ...rest,
                        }
                    });
				}).then((list) => {
					console.log(list)
					return this.addTypeNameCnName(list, {reportDate: this.searchForm.reportDate, type: '1'}).then((list) => {
						this.tableData = list
					});
				}).catch((e) => {
                    console.log(e);
                });
		},
		delHandle(id) {
			var ids = [];

			if (id) {
				ids.push(id);
			} else {
				this.multipleSelection.forEach((row) => {
					ids.push(row.id);
				});
			}

			this.$axios.get('/admin/boat/yellow/delByIds', {params:{ids: ids.join(',')}}).then((res) => {
				this.$message({
					showClose: true,
					message: '恭喜你，操作成功',
					type: 'success',
					onClose: () => {
						this.getList();
					},
				});
			});
		},
		addUpdateButton(id) {
			this.addUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addUpdate.init(id);
			});
		},
	},
};
</script>

<style scoped>
.el-button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin-right: 10px;
}
</style>
